<template>
  <div>
    <router-view></router-view>
    <!-- 快捷登陆 -->
    <div class="top-bg">
      <van-nav-bar
        title="快速登录"
        right-text="注册"
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
        <template #left>
          <van-icon name="cross" size="18" />
        </template>
      </van-nav-bar>
    </div>
    <!-- logo图标 -->
    <!-- <div>
      <img src="static/Home-img/icon-LOGO.png" class="logo"/>
    </div>-->
    <!-- 登录页布局 -->
    <div class="container">
      <!-- 表单验证 -->
      <van-form validate-first @failed="onFailed">
        <!-- 函数验证 -->
        <van-field
          v-model="username"
          name="uname"
          placeholder="手机号"
          :rules="[{ validator:uname, message: '请输入手机号' }]"
        >
          <template #button>
            <van-button size="small" color="grey" type="default">发送验证码</van-button>
          </template>
        </van-field>
        <!-- <hr/> -->
        <van-field
          v-model="password"
          type="password"
          name="upwd"
          placeholder="密码"
          :rules="[{ validator:upwd, message: '请输入正确的密码' }]"
        />
        <div style="margin: 16px;">
          <van-button block type="info"  native-type="submit">登录</van-button>
        </div>
        <div class="user">
          <span @click="users()">账户密码登录</span>
        </div>
      </van-form>
    </div>
    <div class="others">使用第三方账号登录</div>
    <div>
      <!-- 宫格,拉起第三方软件开始登录验证 -->
      <van-grid :border="false" :column-num="3">
        <van-grid-item>
          <van-image src="static/images/Webo.png" class="img1" />
        </van-grid-item>
        <van-grid-item>
          <van-image src="static/images/QQ.png" class="img2" />
        </van-grid-item>
        <van-grid-item>
          <van-image src="static/images/Wechat.png" class="img3" />
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 手机号,验证码,用户协议,密码,昵称,欢迎来到钓鱼人,跳过,钓鱼类型,渔具要求, -->
    <!-- 手机号,验证码;第三方登录 -->
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      username: '',
      password: ''
      //正则验证
      // pattern1: /\d{11}/,
      // pattern2: /\d{6,8}/
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        name: '我的'
      });
      //   Toast('返回');
    },
    onClickRight() {
      //点击注册,触发路由跳转
      //   alert(456);
      //   Toast('按钮');
      this.$router.push({
        name: 'Regsiter'
      });
    },
    // 账户密码登录
    users() {
      this.$router.push({
        name: 'User'
      });
    },
    // 表单验证
    // 校验函数返回 true 表示校验通过，false 表示不通过
    // validator() {
    //   return /1\d{10}/.test(val);
    // },
    uname(username) {
      if (username === '' || /^1[34578]\d{9}$/.test(username) !== true) {
        return false;
      }
    },
    upwd(password) {
      if (password === '' || /^[a-zA-Z0-9_]{5,17}$/.test(password) !== true) {
        return false;
      }
    },
    //提交表单且验证通过后触发
    onSubmit() {
      // console.log('submit', values);

      this.$router.push({
        name: '首页'
      });
    sessionStorage.setItem('_user',this.username)
    sessionStorage.setItem('_pwd',this.password)
    },
    onFailed(errorInfo) {
      console.log('failed', errorInfo);
    }
  }
};
</script>
<style scoped>
/* 登录页背景图 */
.top-bg {
  border-image-repeat: no-repeat;
  width: 100%;
  height: 20rem;
  background-image: url(../../static/Home-img/carousel03.png);
}
/* logo样式 */
.logo {
  padding-left: 14rem;
  width: 8rem;
  height: 3rem;
}
/* 整体背景色:烟灰色 */
.box {
  background-color: whitesmoke;
}
.user {
  float: right;
  color: rgb(0, 152, 253);
  padding-right: 2rem;
}
/* 第三方登录样式 */
.others {
  color: grey;
  margin: 5rem;
  font-size: 1.6rem;
  text-align: center;
  border: solid 0px grey;
}
/* qq,微博,微信 */
.img1,
.img2,
.img3 {
  width: 3rem;
  height: 3rem;
}
</style>